<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3246975_r7ow77w0bdn.css">
    <style>
        #J_goodsList {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;
        }

        #J_goodsList .list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            font-size: 12px;
            line-height: 18px;
        }

        #J_goodsList .list li {
            width: -webkit-calc(20% - 10px);
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 10px;
        }

        #J_goodsList .list li:hover {
            box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
        }

        #J_goodsList .list li img {
            width: 80%;
            display: block;
            margin: 20px auto;
        }

        #J_goodsList .list li .price {
            color: #e4393c;
        }

        #J_goodsList .list li .name {
            /* 多行文本溢出隐藏 */
            display: -webkit-box;
            /* 对齐模式 */
            -webkit-box-orient: vertical;
            /* 超出第二行隐藏 */
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 搜索 */
        .search-site {
            width: 1226px;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            font-size: 13px;

        }

        .search-site .searchBar {
            width: 240px;
            height: 30px;
            border: 1px solid #dfdfdf;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-site .searchBar .searchCon {
            border: none;
            width: 210px;
            text-indent: 5px;
            outline: none;
        }

        .search-site .searchBar .searchBtn {
            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            color: #dfdfdf;
        }

        .orderColBox,
        .orderTypeBox {
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 20px;
            margin-left: 20px;

            border: 1px solid #dfdfdf;
        }

        .orderColBox>label>input,
        .orderTypeBox>label>input {
            display: none;
        }

        .orderColBox>label+label,
        .orderTypeBox>label+label {
            margin-left: 20px;
        }

        .orderColBox>label>input:checked+span,
        .orderTypeBox>label>input:checked+span {
            color: red;
        }

        .showNum {
            margin-left: 20px;
            height: 30px;
            border-color: #dfdfdf;
            outline: none;
            box-sizing: content-box;
        }

        .reset {
            height: 30px;
            margin-left: 20px;
            width: 40px;
            border: 1px solid #dfdfdf;
            /* background-color: tranparent; */
        }

        /* 页码 */
        .page-site {
            height: 40px;
            line-height: 40px;
            margin-top: 20px;
        }

        .page-site .page-wrap {
            display: flex;
            width: fit-content;
            margin: 0 auto;
            font-size: 13px;
        }

        .page-site .page-wrap .prev,
        .page-site .page-wrap .next {
            padding: 0 20px;
        }

        .page-site .page-wrap .tips {
            width: 60px;
            text-align: center;
        }
    </style>
</head>

<body>
    <form class="search-site" onsubmit="return false">
        <div class="searchBar">
            <input type="text" class="searchCon">
            <i class="iconfont icon-sousuo searchBtn"></i>
        </div>
        <div class="orderColBox">
            <label>
                <input type="radio" class="orderCol" name="orderCol" value="id" checked>
                <span>默认</span>
            </label>
            <label>
                <input type="radio" class="orderCol" name="orderCol" value="goodsName">
                <span>名称</span>
            </label>
            <label>
                <input type="radio" class="orderCol" name="orderCol" value="goodsPrice">
                <span>价格</span>
            </label>
        </div>
        <div class="orderTypeBox">
            <label>
                <input type="radio" class="orderType" name="orderType" value="asc" checked>
                <span>升序</span>
            </label>
            <label>
                <input type="radio" class="orderType" name="orderType" value="desc">
                <span>降序</span>
            </label>
        </div>
        <select class="showNum">
            <option value="10">每页显示10条</option>
            <option value="20">每页显示20条</option>
            <option value="30">每页显示30条</option>
            <option value="40">每页显示40条</option>
        </select>
        <input type="reset" class="reset" value="重置">
    </form>
    <div id="J_goodsList">
        <ul class="list">
            <!-- <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li>
            <li class="list-item">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/195641/2/30490/89452/63745247Efb2a8608/46028f28c82c3faf.jpg"
                    alt="">
                <div class="price">¥2699.00</div>
                <div class="name">华为（HUAWEI） 笔记本电脑MateBook D16 16英寸高性能轻薄本商务办公学生手提超极本 银丨十二代i5-12500H 16G 512G</div>
                <div class="comment">10万+条评价</div>
                <div class="shop-name">华为比特专卖店</div>
            </li> -->
        </ul>
    </div>
    <div class="page-site">
        <div class="page-wrap">
            <div class="prev">上一页</div>
            <div class="tips">1/20</div>
            <div class="next">下一页</div>
        </div>
    </div>
</body>
<script>
    // 前端发送请求到后端 
    // 后端返回响应数据(商品列表)
    // 商品渲染到页面



    var listUl = document.getElementsByClassName("list")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];
    var tips = document.getElementsByClassName("tips")[0];


    var searchSite = document.getElementsByClassName("search-site")[0];
    var showNum = document.getElementsByClassName("showNum")[0];

    // 商品的搜索排序和分页 -> 接收5个数据 -> 每隔数据变化都要重新请求和动态生成

    // 声明全局变量设置默认值
    var wd = "";    // 默认查询所有数据
    var col = "id"; //默认id排序
    var type = "asc"; //默认升序
    var page = 1; // 默认显示第一页
    var size = 10;  // 默认显示10条

    // 页面加载时 渲染所有商品 默认id 升序  每页显示10条 显示第一页
    loadGoods();

    // 点击 搜索 排序 重置
    searchSite.onclick = function (e) {
        var e = e || window.event;
        var target = e.target;
        if (target.classList.contains("searchBtn")) {
            var searchCon = target.previousElementSibling;
            wd = searchCon.value;
            loadGoods();
        } else if (target.className == "orderCol") {
            col = target.value;
            console.log(col);
            loadGoods();
        } else if (target.className == "orderType") {
            type = target.value;
            loadGoods();
        } else if (target.className == "reset") {
            wd = "";  // 默认查询所有数据
            col = "id"; //默认id排序
            type = "asc"; //默认升序
            page = 1; // 默认显示第一页
            size = 10;  // 默认显示10条

            loadGoods();
        }
    }

    showNum.onchange = function () {
        size = this.value;
        loadGoods();
    }


    function loadGoods() {
        var xhr = new XMLHttpRequest();

        // 以get方式传递数据时 -> 将参数数据队列拼接到url之后 用?分隔
        // xhr.open("get", "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php?wd=" + wd + "&col=" + col + "&type=" + type + "&page=" +
        //     page + "&size=" + size, true);
        xhr.open("get", `http://43.138.81.225/demo/php/searchGoodsOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);

        xhr.send();

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                var data = JSON.parse(result);
                console.log(data);

                var { current, maxPage, list } = data;

                if (list.length > 0) { //有数据
                    tips.innerHTML = `${current}/${maxPage}`;

                    var html = ""
                    list.forEach((item) => {
                        // console.log(item);
                        var { goodsId, goodsName, goodsPrice, goodsImg, commentCount, shopName } = item;
                        html += `<li class="list-item">
                <img src="${goodsImg}"
                    alt="">
                <div class="price">¥${goodsPrice}</div>
                <div class="name">${goodsName}</div>
            </li>`
                    })
                    listUl.innerHTML = html;
                }
            }
        }
    }

</script>

</html>